<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<ui:composition template="/layouts/default.xhtml">
    <ui:define name="title">#{text['signup.title']}</ui:define>
    <body id="signup">
        <ui:define name="body">
            <div class="col-sm-2">
                <h2>#{text['signup.heading']}</h2>
                #{text['signup.message']}
            </div>
            <div class="col-sm-7">
                <h:form id="signupForm" styleClass="well" autocomplete="off">

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="username" value="#{text['user.username']}"/>
                        <h:inputText styleClass="form-control" value="#{signupForm.user.username}" id="username"
                                     required="true" autofocus="true"/>
                        <p:message for="username"/>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="password" value="#{text['user.password']}"/>
                            <h:inputSecret styleClass="form-control" value="#{signupForm.user.password}" id="password"
                                           redisplay="true" required="true"/>
                            <p:message for="password"/>
                        </div>
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="confirmPassword"
                                           value="#{text['user.confirmPassword']}"/>
                            <h:inputSecret styleClass="form-control" value="#{signupForm.user.confirmPassword}" id="confirmPassword"
                                           redisplay="true" required="true">
                            <!--p:validateEqual for="password"/-->
                            </h:inputSecret>
                            <p:message for="confirmPassword"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="passwordHint" value="#{text['user.passwordHint']}"/>
                        <h:inputText styleClass="form-control" value="#{signupForm.user.passwordHint}" id="passwordHint" required="true"/>
                        <p:message for="passwordHint"/>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="firstName" value="#{text['user.firstName']}"/>
                            <h:inputText styleClass="form-control" id="firstName" value="#{signupForm.user.firstName}" maxlength="50"
                                         required="true"/>
                            <p:message for="firstName"/>
                        </div>

                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="lastName" value="#{text['user.lastName']}"/>
                            <h:inputText styleClass="form-control" value="#{signupForm.user.lastName}" id="lastName" maxlength="50"
                                         required="true"/>
                            <p:message for="lastName"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="email" value="#{text['user.email']}"/>
                            <h:inputText styleClass="form-control" value="#{signupForm.user.email}" id="email" required="true"/>
                            <p:message for="email"/>
                        </div>

                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="phoneNumber"
                                           value="#{text['user.phoneNumber']}"/>
                            <h:inputText styleClass="form-control" value="#{signupForm.user.phoneNumber}" id="phoneNumber">
                                <f:validateRegex pattern="^\(?(\d{3})\)?[-| ]?(\d{3})[-| ]?(\d{4})$"/>
                            </h:inputText>
                            <p:message for="phoneNumber"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="website" value="#{text['user.website']}"/>
                        <h:inputText styleClass="form-control" value="#{signupForm.user.website}" id="website" required="true"/>
                        <p:message for="website"/>
                    </div>

                    <fieldset>
                        <legend class="accordion-heading">
                            <a data-toggle="collapse" href="#collapse-address"><h:outputText
                                    value="#{text['user.address.address']}"/></a>
                        </legend>
                        <div id="collapse-address" class="accordion-body collapse">
                            <div class="form-group">
                                <h:outputLabel styleClass="control-label" for="address"
                                               value="#{text['user.address.address']}"/>
                                <h:inputText styleClass="form-control" value="#{signupForm.user.address.address}" id="address"/>
                                <p:message for="address"/>
                            </div>
                            <div class="row">
                                <div class="col-sm-7 form-group">
                                    <h:outputLabel styleClass="control-label" for="city"
                                                   value="#{text['user.address.city']}"/>
                                    <h:inputText styleClass="form-control" value="#{signupForm.user.address.city}" id="city"/>
                                    <p:message for="city"/>
                                </div>
                                <div class="col-sm-2 form-group">
                                    <h:outputLabel styleClass="control-label" for="province"
                                                   value="#{text['user.address.province']}"/>
                                    <h:inputText styleClass="form-control" value="#{signupForm.user.address.province}" id="province"/>
                                    <p:message for="province"/>
                                </div>
                                <div class="col-sm-3 form-group">
                                    <h:outputLabel styleClass="control-label" for="postalCode"
                                                   value="#{text['user.address.postalCode']}"/>
                                    <h:inputText styleClass="form-control" value="#{signupForm.user.address.postalCode}" id="postalCode">
                                        <f:validateRegex pattern="^\d{5}\d*$"/>
                                    </h:inputText>
                                    <p:message for="postalCode"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <h:outputLabel styleClass="control-label" for="country"
                                               value="#{text['user.address.country']}"/>
                                <h:selectOneMenu value="#{signupForm.country}" id="country" styleClass="form-control" style="height: 38px">
                                    <f:selectItems value="#{signupForm.countries}"/>
                                </h:selectOneMenu>
                                <p:message for="country"/>
                            </div>
                        </div>
                    </fieldset>

                    <div class="form-group form-actions">
                        <h:commandButton value="#{text['button.register']}" action="#{signupForm.save}" id="save"
                                         styleClass="btn btn-primary"/>
                        <h:commandButton value="#{text['button.cancel']}" action="cancel" immediate="true" id="cancel"
                                         styleClass="btn btn-default"/>
                    </div>
                </h:form>
            </div>
        </ui:define>
    </body>
</ui:composition>
</html>